<template>
    <button :disabled='loading || requestIng' :class='[$style.button, $style[type]]' @click='click'><LoadingOutlined v-if='loading || requestIng' :class='$style.loading' /><slot></slot></button>
</template>

<script lang='ts' setup>
    import { LoadingOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
    const props = withDefaults(defineProps<{
        loading? : boolean;
        type : 'default' | 'primary' | 'error' | 'success',
        before? : () => Promise<any>
    }>(), {
        type : 'default'
    })

    const emit = defineEmits<{
        (e : 'click') : void;
    }>()

    const requestIng = ref(false)

    async function click() {
        if(props.before) {
            requestIng.value = true
            await props.before()
            requestIng.value = false
        }

        emit('click')
    }

</script>


<style lang='scss' module>
    .loading{
        margin-right: 3px;
    }
    .button{
        border: none;
        background: none;
        border-radius: 0;
        outline: none;
        font-size: $fontSize;
        cursor: pointer;

        &.default {
            color: $color;
        }

        &.primary{
            color: $primaryColor;
        }

        &.success{
            color: $successColor;
        }

        &.error{
            color: $errorColor;
        }

        &:active, &:hover{
            opacity: 0.8;
        }
    }
</style>